<template>
	<view class="login-form">
		<input type='text' style="position: fixed;bottom: -9999px;" />
    <input type='password' style="position: fixed;bottom: -9999px;" />
		<view class="login-form-item mb20">
			<u--input
			   v-model="form.phone"
			   border="none"
			   type="text"
			   maxlength="11"
			   prefixIcon="phone"
				prefixIconStyle="color: #fff;font-size: 22px;line-height: 22px;"
				placeholder="输入你的手机号"
				:spellcheck="false"
				clearable
				@blur="phoneTest"/>
		</view>
		<view class="login-form-item mb20">
			<u--input v-model="form.password" border="none" type="password" prefixIcon="lock"
				prefixIconStyle="color: #fff;font-size: 22px;line-height: 22px;" placeholder="输入账号密码"
				:spellcheck="false" clearable />
		</view>
		<view class="login-form-code mb20">
			<u-input v-model="form.captcha" maxlength="4" border="none" type="text" prefixIcon="fingerprint"
				prefixIconStyle="color: #fff;font-size: 22px;line-height: 22px;" placeholder="输入验证码"
				:spellcheck="false">
				<image slot="suffix" :src="captcha" @click="getCaptcha" />
			</u-input>
		</view>
		<view class="login-form-handle flexColCenter mb20">
			<button class="login-form-handle-button mb10" size="mini" @click="submit">
				<u-icon name="arrow-rightward" color="#f6f6f6" />
			</button>
			<text style="color: #2b85e4;" @click="toRegister">未有账号？请注册</text>
		</view>
		<view v-if="this.platform === 'mp' || this.platform === 'weixin'">
			<u-button type="success" text="微信用户一键登录" @click="wxLogin({})" />
		</view>
		<u-popup
		  :show="loginPopup.visible"
			mode="center"
			closeable
			:closeOnClickOverlay="false"
			round="10rpx"
			@close="closeLoginPopup"
		>
        <view class="loginPopup">
            <view class="flexCenter fs16">首次微信登录，请绑定手机号</view>
						<u-gap height="20" />
						<view>
							<u--input
                placeholder="请输入手机号"
                border="surround"
                v-model="loginPopup.phone"
              />
						</view>
						<u-gap height="20" />
						<view>
							<u-button type="success" text="授权登录" @click="getUserProfile" />
						</view>
        </view>
		</u-popup>
	</view>
</template>

<script>
	import { isPhone } from '@/utils/verify.js'
	export default {
		options: {
			styleIsolation: 'shared'
		},
		props: {
			pageType: { // 页面类型
				type: String,
				default: ''
			}
		},
		data() {
			return {
				platform: uni.$u.platform, // 当前运行平台
				form: { // 表单数据
					phone: '15886357069',
					password: '123456',
					captcha: ''
				},
				captcha: '', // 图形验证码
				loginPopup: {
					visible: false,
					phone: ''
				}
			};
		},
		mounted() {
			this.getCaptcha()
		},
		methods: {
			onGetPhoneNumber(e) {
				uni.checkSession({
					success: (res) => {
						console.log(res)
					}
				})
			},
			// 关闭弹出层
			closeLoginPopup() {
				this.loginPopup = {
					visible: false
				}
			},
			// 输入手机号后获取用户信息再次一并发送到后端
			// 获取用户信息。每次请求都会弹出授权窗口，用户同意后返回 userInfo
			getUserProfile() {
				if (!isPhone(this.loginPopup.phone)) {
					this.showToast('请输入正确的手机号')
					return
				}
				uni.getUserProfile({
					desc: '用户登录',
					lang: 'zh_CN',
					success: ({ errMsg, encryptedData, iv }) => {
						if (errMsg === 'getUserProfile:ok') {
							this.wxLogin({ encryptedData, iv, phone: this.loginPopup.phone })
						}
					}
				})
			},
			// 调用登录api，把获取的code调用接口上传至服务器
			async wxLogin({ encryptedData, iv, phone }) {
				const code = await this.$store.dispatch('user/wxLogin', { encryptedData, iv, phone })
				if (code === 0) { // 登录成功
					this.showSuccess('登陆成功')
					this.$store.dispatch('user/GetInfo') // 获取用户信息
					uni.$emit('createWebSocket') // 开启通信
					uni.switchTab({
						url: "/pages/index/index"
					})
				} else { // 首次微信登录需绑定手机号，个人开发者无法申请获取手机号api
				  this.loginPopup.visible = true
				}
			},
			// 登录提交
			async submit() {
				if (!isPhone(this.form.phone)) {
					this.showToast('请输入正确的手机号')
					return
				}
				const code = await this.$store.dispatch('user/Login', this.form)
				if (code === 0) {
					this.showSuccess('登陆成功')
					this.$store.dispatch('user/GetInfo') // 获取用户信息
					uni.$emit('createWebSocket') // 开启通信
					uni.switchTab({
						url: "/pages/index/index"
					})
				} else {
					this.getCaptcha()
				}
			},
			// 手机号输入验证
			phoneTest() {
				if (!isPhone(this.form.phone)) {
					this.showToast('请输入正确的手机号')
					return
				}
			},
			// 获取图形验证码
			async getCaptcha() {
				const {
					code,
					data
				} = await this.$verify.captcha()
				if (code === 0) {
					this.captcha = data.toString()
				}
			},
			// 切换到登录
			toRegister() {
				this.$emit('update:pageType', 'registerForm')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-form {
		&-item {
			/deep/ .u-input {
				background: rgba(0, 0, 0, .25);
				padding: 16rpx 40rpx !important;
				border-radius: 40rpx;

				&__content__field-wrapper {
					margin-left: 20rpx;

					&__field {
						color: #FFFFFF !important;
						letter-spacing: 2px;
						width: 100%;
					}
				}

				&__content__subfix-icon {
					width: 192rpx;
					height: 48rpx;
					background: #FFFFFF;
					border-radius: 10rpx;
				}
			}
		}

		&-code {
			/deep/ .u-input {
				background: rgba(0, 0, 0, .25);
				border-radius: 40rpx;

				&__content {
					&__prefix-icon{
						padding: 16rpx 0 16rpx 40rpx !important;
					}
					&__field-wrapper {
						margin-left: 20rpx;

						&__field {
							color: #FFFFFF !important;
							letter-spacing: 2px;
							width: 100%;
						}
					}

					&__subfix-icon {
						width: 180rpx;
					    height: 60rpx;
						border-radius: 30rpx;
						margin-right: 10rpx;
						image{
							width: 100%;
							height: 100%;
							object-fit: cover;
						}
					}
				}
			}
		}

		// &-input{
		// 	display: flex;
		// 	align-items: center;
		// 	background: rgba(0,0,0,.25);
		// 	padding: 16rpx 40rpx !important;
		// 	border-radius: 40rpx;
		//     input{
		// 		color: #FFFFFF;
		// 		letter-spacing: 2px;
		// 		width: 100%;
		// 	}
		// }
		&-handle {
			&-button {
				padding: 18rpx 120rpx !important;
				border-radius: 40rpx;
				background: rgba(0, 0, 0, .25);
				/deep/ .u-icon {}
			}
		}
	}
	.loginPopup{
		width: 700rpx;
		padding: 30rpx 20rpx;
		color: #606266;
	}
</style>
